<template>
  <v-card>
    <v-row>
      <v-col cols="2">
        <template>
          <v-simple-table
            fixed-header
            height="300px"
            dense
          >
            <template v-slot:default>
              <thead class="table-header">
                <tr>
                  <th class="text-left">
                    因子名称
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="tiem in sheets.params_list"
                  :key="tiem"
                >
                  <td>{{ tiem.name }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </template>
      </v-col>
      <v-col cols="4">
        <template>
          <v-simple-table
            fixed-header
            height="300px"
            dense
          >
            <template v-slot:default>
              <thead>
                <tr>
                  <th class="text-left">
                    因子名称
                  </th>
                  <th class="text-left">
                    因子取值|水平名称
                  </th>
                  <th class="text-left">
                    权重
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="item in sheets.params_values"
                  :key="item"
                >
                  <td>{{ item.name }}</td>
                  <td>{{ item.value }}</td>
                  <td>{{ item.weight }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </template>
      </v-col>
      <v-col cols="6">
        <template>
          <v-simple-table
            fixed-header
            height="130px"
            dense
          >
            <template v-slot:default>
              <thead>
                <tr>
                  <th class="text-left">
                    子模型
                  </th>
                  <th class="text-left">
                    阶数
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="item2 in sheets.child_group"
                  :key="item2"
                >
                  <td>{{ item2.model }}</td>
                  <td>{{ item2.order }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </template>
        <template>
          <v-simple-table
            fixed-header
            height="170px"
            dense
          >
            <template v-slot:default>
              <thead>
              <tr>
                <th class="text-left">
                  别称
                </th>
                <th class="text-left">
                  IF名称
                </th>
                <th class="text-left">
                  IF条件
                </th>
                <th class="text-left">
                  IF取值
                </th>
                <th class="text-left">
                  THEN名称
                </th>
                <th class="text-left">
                  THEN条件
                </th>
                <th class="text-left">
                  THEN取值
                </th>
              </tr>
            </thead>
              <tbody>
              <tr
                v-for="item3 in sheets.conditions"
                :key="item3"
              >
                <td>{{ item3.index }}</td>
                <td>{{ item3.if_name }}</td>
                <td>{{ item3.if_cond }}</td>
                <td>{{ item3.if_value }}</td>
                <td>{{ item3.then_name }}</td>
                <td>{{ item3.then_cond }}</td>
                <td>{{ item3.then_value }}</td>
              </tr>
            </tbody>
            </template>
          </v-simple-table>
        </template>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import {defineComponent} from '@vue/composition-api'

export default defineComponent({
  setup() {

  },
  props:{
    SheetData: {
      type: Object,
      default: {}
    }
  },
  data(){
    return{
      sheets: {
        'params_list': ['PLATFORM', 'CPUS', 'RAM', 'APP'],
        'params_values': [
            {'name': 'PLATFORM', 'value': 'x86', 'weight': 5},
            {'name': 'PLATFORM', 'value': 'ia64', 'weight': 10},
            {'name': 'PLATFORM', 'value': 'amd64', 'weight': 2},
            {'name': 'CPUS', 'value': 'Single', 'weight': 2},
            {'name': 'CPUS', 'value': 'Dual', 'weight': 5},
            {'name': 'CPUS', 'value': 'Quad', 'weight': 8},
            {'name': 'RAM', 'value': '128MB', 'weight': 5},
            {'name': 'RAM', 'value': '1GB', 'weight': 5},
            {'name': 'RAM', 'value': '4GB', 'weight': 5},
            {'name': 'RAM', 'value': '64GB', 'weight': 5},
            {'name': 'APP', 'value': 'SQLServer', 'weight': 5},
            {'name': 'APP', 'value': 'Exchange', 'weight': 5},
            {'name': 'APP', 'value': 'Office', 'weight': 5},
          ],
        'child_group': [
            {'model': ['PLATFORM', 'CPUS', 'APP'], 'order': 3},
            {'model': ['RAM'], 'order': 1},
          ],
        'conditions': [
            {'index': 'A', 'if_name': 'PLATFORM', 'if_flag': 'in', 'if_value': 'x86,amd64',
                           'then_name': 'RAM', 'then_flag': '>', 'then_value': '1GB'},
            {'index': 'B', 'if_name': 'CPUS', 'if_flag': '=', 'if_value': 'Quad',
                           'then_name': 'RAM', 'then_flag': '>', 'then_value': '1GB'},
            {'index': 'C', 'if_name': 'A', 'if_flag': 'and', 'if_value': 'B',
                           'then_name': 'RAM', 'then_flag': '>', 'then_value': '1GB'},
          ]
      }
  }},
  mounted() {
    this.init_data()
  },
  methods: {
    init_data(){
      this.sheets.params_list = this.SheetData.FirstItem
      this.sheets.params_values = this.SheetData.SecondItem
      this.sheets.child_group = this.SheetData.ThirdItem
      this.sheets.conditions = this.SheetData.FourthItem
    }
  }

})
</script>

<style scoped>
.table-header {
  background-color: #50fefe;
}
</style>